<template>
  <div class="login">
    <div class="div1">
      <ArrowLeftBold style="width: 1.5em" @click="tz"></ArrowLeftBold>

      <p @click="psword">密码登录</p>
    </div>
    <div class="div2">
      <img src="../../logo.png" />
      <h2>装修匠</h2>
    </div>
    <div class="div3">
      <el-input v-model="username" placeholder="请输入手机号码" />
      <div class="p">
        <el-input class="yzm" v-model="password" type="password" placeholder="请输入登录密码" show-password />
        <el-button @click="code">获取验证码</el-button>
      </div>
      <el-button @click="login">登录</el-button>
      <p>
        <input type="radio" :value="true" v-model="falg" @click="radios" />
        我已阅读并同意《
        <span>用户协议</span>
        》与《
        <span>隐私政策</span>
        》
      </p>
    </div>
    <div>
      <div className="kl">
        <video ref="{videoRef}" autoPlay muted></video>
        <canvas ref="{canvasRef}" style="display: none"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import '../login.css'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '../request/request'
export default {
  setup() {
    const router = useRouter()
    const username = ref('')
    const password = ref('')
    const falg = ref(false)
    const pword = ref('')

    const psword = () => {
      router.push('/password')
    }
    const tz = () => {
      router.go(-1)
    }

    const radios = () => {
      if (falg) {
        falg.value = false
      } else {
        falg.value = true
      }
    }

    const login = () => {
      if (falg.value == false) {
        ElMessage.error('未勾选')
      } else {
        axios
          .get(
            `/api/login?password=${password.value}&pword=${pword.value}&username=${username.value}`,
          )
          .then((res) => {
            if (res.data.code == 200) {
              localStorage.setItem('accessToken', res.data.token.accessToken)
              localStorage.setItem('refreshToken', res.data.token.refreshToken)
              ElMessage.success('登录成功')
              router.push('/home')
            } else {
              ElMessage.error('登录失败')
            }
          })
      }
    }

    const registers = () => {
      router.push('/register')
    }

    const code = () => {
      axios.post('/api/get_sms', { phone: username._rawValue }).then((res) => {
        if (res.data.code == 0) {
          ElMessage.success('已发送验证码')
        }
        pword.value = res.data.sms
        console.log(res.data.sms)
      })
    }

    return {
      psword,
      tz,
      username,
      password,
      falg,
      radios,
      login,
      registers,
      code,
    }
  },
}
</script>

<style></style>
